import { useRoutes,useNavigate,useLocation } from "react-router-dom"
import { useEffect } from 'react'
import route from "@/router"
import { ConfigProvider } from "antd"
import { SmileOutlined } from '@ant-design/icons'
import { useEnvStore } from '@/stores/env'
import { useUserStore } from '@/stores/user'
import { useShallow } from 'zustand/react/shallow'
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
function App() {
  
  const { getThemeConfig } = useEnvStore(useShallow((state) => ({
    getThemeName: state.getThemeName,
    getThemeConfig: state.getThemeConfig,
    themeName: state.themeName,
    themeToken: state.themeToken
  })))
  const routes = useRoutes(route)
  const userStore = useUserStore()
  const navigate = useNavigate()
  const location = useLocation()
  useEffect(() => {
    // 实现登录验证
    // const isLoginPrefix = location.pathname.startsWith('/login')
    // if (!userStore.token){
    //   if (!isLoginPrefix){
    //     navigate('/login')
    //   }
    // }else {
    //   if (isLoginPrefix) {
    //     navigate('/')
    //   }
    // }
    // 依赖项数组，当 location 或 userStore.token useEffect会被重新执行。
  }, [location, userStore.token])
  return (
    <>
      <ConfigProvider locale={zhCN} theme={getThemeConfig()} renderEmpty={(_?: string) => {
        return (
          <div style={{ textAlign: 'center' }}>
            <SmileOutlined style={{ fontSize: 20 }} />
            <p>Data Not Found</p>
          </div>
        )
      }}>
        {routes}
      </ConfigProvider>
    </>
  )
}

export default App
